﻿var inlineEditForm =
'<div style="display:none"><div id="ineditform"><h3>Edit text</h3>'
        + '<input type="hidden" id="ineditkey" />'
        + '<table class="editTextTable">'
        + '    <tr>'
        + '        <td class="label">Context:</td>'
        + '        <td id="ineditcontext"></td>'
        + '    </tr>'
        + '    <tr>'
        + '        <td class="label">Value:</td>'
        + '        <td><textarea id="ineditvalue" cols="50" rows="10"></textarea></td>'
        + '    </tr>'
        + '    <tr>'
        + '        <td></td>'
        + '        <td>'
        + '            <input type="submit" onclick="saveInlineEditingText(); return false;" value="Save"/>'
        + '            <input type="submit" onclick="saveInlineEditingText(); $.fancybox.close(); return false;" value="Save and close"/>'
        + '            <br />'
        + '            <span style="display:none" id="ineditsavestatus"></span>'
        + '        </td>'
        + '    </tr>'
        + '</table>'
    + '</div>'
+ '</div>';

$(function () {
    $('.easEdit').hover(
        function () { $(this).append('<a class="easEditLabel" href="#ineditform" key="' + $(this).attr('key') + '">edit</a>'); hookupEditor(".easEditLabel"); },
        function () { $(this).find('.easEditLabel').remove(); });

    $('body').append(inlineEditForm);

});

function hookupEditor(selector) {
    $(selector).fancybox({ 'showCloseButton': true, 'hideOnOverlayClick': true,
        'onStart': function (array, index) {
            var t = $(array[index]);
            var key = t.attr('key');
            $('#ineditsavestatus').hide();
            $.ajax({
                "url": InlineGetEASStringUrl,
                "data": { key: key },
                "success": function (d) {
                    if (d.success) {
                        $('#ineditkey').val(d.key);
                        $('#ineditcontext').text(d.context);
                        $('#ineditvalue').val(d.value);
                    }
                    else
                        alert("Error getting details for " + key);
                },
                "contentType": "application/x-www-form-urlencoded; charset=utf-8",
                "dataType": "json",
                "type": "POST",
                "cache": false,
                "error": function () {
                    alert("Error getting data for " + key);
                }
            });
        } 
    });
                }

function saveInlineEditingText(){
    var key = $('#ineditkey').val();
    var value = $('#ineditvalue').val();
    $.ajax({
        "url": InlineSaveEASStringUrl,
        "data": { key: key, value: value },
        "success": function (d) {
            if (d.success) {
                $('#ineditsavestatus').text('Saved successfully!');
                // try to update value
                var tt = $('.easEdit[key="' + key + '"]');
                if( tt !== undefined )
                    tt.html(d.newValue);
                // try to refresh table if there is
                if( $('#ineditform').attr('dataTableId') != null )
                    $('#' + $('#ineditform').attr('dataTableId')).dataTable().fnDraw(false);
            }
            else
                $('#ineditsavestatus').text('Error saving data!');

            $('#ineditsavestatus').fadeIn(function () {
                setTimeout(function () { $('#ineditsavestatus').fadeOut() }, 5000);
            });
        },
        "contentType": "application/x-www-form-urlencoded; charset=utf-8",
        "dataType": "json",
        "type": "POST",
        "cache": false,
        "error": function () {
            alert("Error saving data for " + key);
        }
    });
}

//TODO EAS: hmm this definitely needs more cleanup
function showRequestStringsHandler(strings) {
    var handl = '<div class="easRequestStringsHandler"><a href="#" onclick="$(\'.easRequestStringsTable\').fadeIn(); return false;">editable strings</a></div>';
    $('body').append(handl);
    // create table
    var rows = '';
    $.each(strings, function (idx, el) { 
        rows += '<tr><td>' + el.ContextWithIndex + '</td>'
                + '<td class="easEdit" key="' + el.Key + '">' + el.Value + '</td></tr>\r\n';
    });
    var table = '<div class="easRequestStringsTable" style="display:none;"><div class="drag">drag to move <a href="#" onclick="$(this).closest(\'.easRequestStringsTable\').fadeOut(); return false;" class="easClose">close</a></div><div class="inner"><table><tr><th>context</th><th>value</th></tr>' + rows + '</table></div><a href="#" onclick="$(this).closest(\'.easRequestStringsTable\').fadeOut(); return false;" class="easClose">close</a></div>';
    $('body').append(table);
    hookupEditor(".easEditRequestString");
    $(".easRequestStringsTable").drags({handle: '.drag'} );
}